<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			}
		#kong{
			height:20px;
		}
		#zuida{
			display: flex;
			flex-direction:column;
			justify-content: space-between;
		}
		
		#biaoti{color: #584F60;
			font-size: 20px;
			padding-left: 0.3rem;
			height: 0.4rem;
		    line-height: 0.4rem;
			border-bottom: 1px solid #646464;
			display: flex;
			flex-direction:row;
			justify-content:space-between;
		/*	background-color:#584F60;*/
			flex: 1;
		}
		#biaoti #you{
			margin-right: 0.1rem;
		}
		#biaoti span{
			margin-left: 0.2rem;
		}
		#datu{
			margin: auto;
		}
		#huang{
			color: #FF9D09;
		}
		#wenzi{
			font-size: 18px;
			padding-left: 0.3rem;
		
			border-bottom: 1px solid #BFBFBF;
		}
		#wenzi p{
			padding-bottom: 0.2rem;
		}
		#dizhi{
			padding-top: 0.1rem;
			height: 0.6rem;
			font-size: 15px;
			display: flex;
			flex-direction:row;
			justify-content:space-between;
			border-bottom: 3px solid #F0F0F0;
		}
		#dingwei{
			font-size: 37px;
			color: #BABABA;
			margin-left: 0.3rem;
		}
		#dizhi p{
			height: 40px;
			line-height: 47px;
		}
		#dianhua{
			font-size: 37px;
			color: #0FC3B1;
			margin-right: 0.3rem;
		}
		#jingpin{
			padding-top: 0.5rem;
			padding-bottom: 0.3rem;
			font-size: 15px;
			display: flex;
			flex-direction:row;
			justify-content:space-between;
		}
		#jingpin_zuo{
			margin-left: 0.4rem;
		}
		#jingpin_you{
			margin-right: 0.2rem;
			color: #B2B2B2;
		}
		.xiaotu{
			display: flex;
			flex-direction:row;
			justify-content:center;
			font-size: 15px;
			margin-top: 0.3rem;
			padding-bottom: 0.3rem;
			border-bottom: 1px solid #CACACA;
		}
		.xiaotu_zuo{
			width: 3rem;
			margin-left: 0.3rem;
		
		}
		.xiaotu_you{
			margin-right: 0.3rem; 
		}
		.jiaolian_xia{
			font-size: 13px;
		}
		#jiaolian{
			font-size: 15px;
		}
		.jiaolian_xia p{
			margin: auto;
		}
		.jiaolian_xiao_1{
		/*	background-color: aqua;*/
		}
		#jiaolian_da{
			display: flex;
			flex-direction:row;
			justify-content:center;
		}
		.jiaolian_shang img{
			width: 1.3rem;
		}
		.jiaolian_xia p{
			text-align: center;
		}
		
		.back:hover{
			color:yellow;
		}
		
		.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				
				.showpic{
					margin: auto;
				}
				
				div.empty{
					height: 8px;
					border: 1px solid red;
				}
				
				.new-min-title-list {
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    padding: 0;
				}
				
				ul, li {
				    font-style: normal;
				    list-style: none;
				}
				
				li {
				    display: list-item;
				    text-align: -webkit-match-parent;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				.new-min-title-list li a {
				    display: flex;
				    flex-direction: column;
				    align-items: center;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				
				.mui-table-view {
				    position: relative;
				    margin-top: 0;
				    margin-bottom: 0;
				    padding-left: 0;
				    list-style: none;
				    background-color: #fff;
				}
				
				.mui-table-view-cell {
				    position: relative;
				    overflow: hidden;
				    padding: 11px 15px;
				    -webkit-touch-callout: none;
				}
				
				.mui-table-view-cell>a:not(.mui-btn) {
				    position: relative;
				    display: block;
				    overflow: hidden;
				    margin: -11px -15px;
				    padding: inherit;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    color: inherit;
				    border-bottom: solid 1px #efefef;
				}
				.hit,.time{
					float: right;
				}
				
			    #container {
		            width:100%;
		            height: 320px;
		        }
		        
		        .collect{
		        	background: deepskyblue;
		        	color: #FFFAFA;
		        	width: 71px;
		        	height: 30px;
		        	position: absolute;
		        	right: 0px;
		        	top: 24px;
		        	border: none;
		        	font-size: 16px;
		        }
</style>

<title>俱乐部详情</title>
</head>

<body>
<div id="zuida">
	 <div id="kong">
</div>
 
	<div id="biaoti">
   	<div id="zuo"><i class="fa fa-arrow-left back"></i></div>
   	<div id="zhong"><span>俱乐部详情</span></div>
   	<div id="you">
   	<button  class="collect" onclick="collect()" >关注 </button>
   	</div>
   	 </div>
   	 <div id="datu">
   	 	<img src="" alt="" width="100%" class="clubpic"/>
   	 </div>
   	 <div id="wenzi">
   	 	<p class="clubname"></p>
   	 </div>
   	 <div id="dizhi">
   	 	<div id="dingwei"><i class="fa fa-map-marker"></i></div>
   	 	<p class="city"></p>
   	 </div>
</div>
<div class="info">
	<ul class="mui-table-view">		           
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							点击量:<p class="hit"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							发布时间:<p class="time"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							地图位置显示:
						</a>
					</li>
				</ul>
</div>

<div id="container"></div>

	<script>
		    var deviceWidth = document.documentElement.clientWidth;
	        if(deviceWidth > 375) 
	        deviceWidth = 375; 
	        document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px';
	    
	        var url=window.location.href;
            spstr=url.split("");
            var id=spstr[spstr.length-1];
            console.log(id);
            let jd,wd;
            var userid=window.localStorage.getItem('userid');
         $(function() {
            var url="http://172.24.10.175/workout/api.php/get/mod/club/id/"+id;
//          alert(url);
            $.ajax({
					type: "post",
					url: url,
					cache: false,
					dataType: "jsonp",
					success: function(data){	
						$(".clubpic").attr("src","http://172.24.10.175/workout/Uploads/"+data.thumb);					 													    	                    $(".clubname").text(data.club_name);   
					    $(".hit").text(data.hits); 
					    $(".provice").text(data.province_name); 
					    $(".city").text(data.city_name); 
					    $(".address").text(data.district_name); 
						$(".time").text(data.insert_time); 
			                   jd = data.longitude;			              
			                  wd= data.latitude;
 			                    
					}					 
				});
			});	
	
			
			window.onload=function(){
    		   function getMyPosition(){
            if(window.navigator.geolocation){
                //获取当前位置..
//              alert("正在获取您的位置.");
                //如果获取位置成功，会调用名字为successPosition 的方法.
                navigator.geolocation.getCurrentPosition
                (successPosition,errorPosition);
            }else{
                alert("您当前的浏览器不支持..");
            }
        }
        function successPosition(position){
//          var jd=position.coords.longitude;//经度
//          var wd=position.coords.latitude; //纬度
//         alert(jd+","+wd);
           	// 百度地图API功能
		var map = new BMap.Map("container");//创建Map实例
		var point = new BMap.Point(jd, wd);//根据经纬度定位，新建一个百度坐标
		map.centerAndZoom(point, 15);//调用Map.centerAndZoom()方法对地图进行初始化。
		//centerAndZoom就是map的一个方法，第一个参数Point作为地图中心坐标点，第二个参数是级别，级别数字越小看到的地图范围越大。
		
		//创建小狐狸
		var pt = new BMap.Point(jd, wd);
		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
		var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		//其他功能
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		map.addControl(new BMap.ScaleControl()); //比例尺，地图左下角
		map.addControl(new BMap.MapTypeControl());// 地图类型，右上角
		map.addControl(new BMap.OverviewMapControl());//缩略地图，地图右下角
		map.addControl(new BMap.NavigationControl()); //平移缩放控件，地图左上角
        }
          //如果没有获取到位置，就会调用这个方法
        function errorPosition(){
            alert("获取位置失败.");
        }
        getMyPosition();
    	}

 function collect() {

        $.ajax({
            url: "http://172.24.10.175/workout/api.php/create/mod/clubfans/club_id/" + id + "/user_id/" + userid + "/fans_type=1",
            type: 'post',
            async: false,
            dataType: 'jsonp',
            success: function (data) {
                alert("关注成功");
            }
        });
   }
</script>
</body>
</html>
